<template>
    <div style="display: table; padding: 10px 5px 10px; min-width: 2000px ">
        <div style="display: table-row">
            <div class="tableTitle" style="width: 1%">
                序号
            </div>
            <div class="tableTitle" style="width: 4%">
                检索类别
            </div>
            <div class="tableTitle" style="width: 3%">
                作者
            </div>
            <div class="tableTitle" style="width: 12%">
                题目
            </div>
            <div class="tableTitle" style="width: 12%">
                刊名
            </div>
            <div class="tableTitle" style="width: 3%">
                出版年
            </div>
            <div class="tableTitle" style="width: 5%">
                issn
            </div>
            <div class="tableTitle" style="width: 6%">
                最终分区
            </div>
            <div class="tableTitle" style="width: 6%">
                最终影响因子
            </div>
            <div class="tableTitle" style="width: 9%">
                重复说明
            </div>
            <div class="tableTitle" style="width: 6%">
                第一作者身份<span style="color: red">*</span>
            </div>
            <div class="tableTitle" style="width: 6%">
                第一作者姓名<span style="color: red">*</span>
            </div>
            <div class="tableTitle" style="width: 3%">
                导师
            </div>
            <div class="tableTitle" style="width: 6%">
                导师职称
            </div>
            <div class="tableTitle" style="width: 6%">
                通讯作者身份<span style="color: red">*</span>
            </div>
            <div class="tableTitle" style="width: 6%">
                通讯作者姓名<span style="color: red">*</span>
            </div>
            <div class="tableTitle" style="width: 4%">
                领款人<span style="color: red">*</span>
            </div>
            <div v-if="(type === '1' && isFinish === 0) || type === '0'" class="tableTitle">
            </div>
        </div>
        <div :class="{'tablerow':true, 'grayLine': (index % 2 === 0)}" style="display: table-row; min-width: 1000px" v-if="paperList.length > 0" v-for="(item,index) in paperList" :key="index">
            <div class="tableCell">
                {{index + 1}}
            </div>
            <div class="tableCell">
                {{item.sort}}
            </div>
            <div class="tableCell">
                {{item.author}}
            </div>
            <div class="tableCell">
                {{item.timu}}
            </div>
            <div class="tableCell">
                {{item.kanming}}
            </div>
            <div class="tableCell">
                {{item.chubannian}}
            </div>
            <div class="tableCell">
                {{item.issn}}
            </div>
            <div class="tableCell">
                {{item.fenqu}}
            </div>
            <div class="tableCell">
                {{item.yinzi}}
            </div>
            <div class="tableCell">
                {{item.chongfushuoming}}
            </div>

            <template v-if="item.is_renling !== 4 && item.is_renling !== 5">
                <div class="tableCell">
                    <p>{{item.diyizuozheShenfen.name}}</p>
                </div>
                <div class="tableCell">
                    <p>{{item.diyizuozhe.name}}</p>
                </div>
                <div class="tableCell">
                    <p>{{item.daoshi.name}}</p>
                </div>
                <div class="tableCell">
                    <p>{{item.daoshiShenfen.name}}</p>
                </div>
                <div class="tableCell">
                    <p>{{item.tongxunzuozheShenfen.name}}</p>
                </div>
                <div class="tableCell">
                    <p>{{item.tongxunzuozhe.name}}</p>
                </div>
            </template>
            <template v-if="item.is_renling === 4 || item.is_renling === 5">
                <div class="tableCell" @click="showDialog(1, item)">
                    <el-input v-model="item.diyizuozheShenfen.name" placeholder="请输入第一作者身份" size="mini"></el-input>
                </div>
                <div class="tableCell" @click="showDialog(1, item)">
                    <el-input v-if="item.is_renling === 4 || item.is_renling === 5" v-model="item.diyizuozhe.name" placeholder="请输入第一作者姓名" size="mini"></el-input>
                </div>
                <div class="tableCell" @click="showDialog(2, item)">
                    <el-input v-if="item.is_renling === 4 || item.is_renling === 5" v-model="item.daoshi.name" placeholder="请输入导师" size="mini"></el-input>
                </div>
                <div class="tableCell" @click="showDialog(2, item)">
                    <el-input v-if="item.is_renling === 4 || item.is_renling === 5" v-model="item.daoshiShenfen.name" placeholder="请输入导师职称" size="mini"></el-input>
                </div>
                <div class="tableCell" @click="showDialog(3, item)">
                    <el-input v-if="item.is_renling === 4 || item.is_renling === 5" v-model="item.tongxunzuozheShenfen.name" placeholder="请输入通讯作者身份" size="mini"></el-input>
                </div>
                <div class="tableCell" @click="showDialog(3, item)">
                    <el-input v-if="item.is_renling === 4 || item.is_renling === 5" v-model="item.tongxunzuozhe.name" placeholder="请输入通讯作者姓名" size="mini"></el-input>
                </div>
            </template>

            <div class="tableCell">
                <p v-if="item.is_renling !== 4 && item.is_renling !== 5">{{item.lingkuanren}}</p>
                <el-input v-if="item.is_renling === 4 || item.is_renling === 5" v-model="item.lingkuanren" placeholder="请输入领款人" size="mini"></el-input>
            </div>
            <div v-if="type === '1' && isFinish === 0" class="tableCell">
                <el-button v-if="item.is_renling === 0" type="primary" size="mini" @click="item.is_renling = 4">认领</el-button>
                <el-button v-if="item.is_renling === 4" type="primary" size="mini" @click="submit(item)">提交</el-button>
                <el-button v-if="item.is_renling === 2" type="primary" size="mini" @click="item.is_renling = 5">修改</el-button>
                <el-button v-if="item.is_renling === 5" type="primary" size="mini" @click="update(item)">提交</el-button>
                <p v-if="item.is_renling === 1">已认领</p>
            </div>
            <div v-if="type === '0'" class="tableCell">
                <el-button v-if="item.is_renling === 2 && isFinish === 1" type="primary" size="mini" @click="item.is_renling = 5">修改</el-button>
                <el-button v-if="item.is_renling === 5 && isFinish === 1" type="primary" size="mini" @click="update(item)">提交</el-button>
                <p v-if="item.is_renling === 1 && isFinish === 0">已认领</p>
                <p v-if="item.is_renling === 0 && isFinish === 0">未认领</p>
            </div>
        </div>

        <el-dialog
            v-if="dialogMsg.visible"
            :title="dialogMsg.title"
            :visible.sync="dialogMsg.visible"
            width="25rem"
            :modal="dialogMsg.dialogModal">
            <div style="display: table">
                <div style="display: table-row">
                    <div style="display: table-cell; color: #214084; font-size: 1rem; padding-right: 2rem">
                        身份:
                    </div>
                    <div style="display: table-cell">
                        <el-select v-model="dialogMsg.positionName" placeholder="请选择身份" @change="elselectChange">
                            <el-option
                                v-for="(item) in dialogMsg.positionList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div style="display: table-row; margin-top: 4rem">
                    <div v-show="dialogMsg.position.type !== -1" style="display: table-cell; color: #214084; font-size: 1rem; padding-right: 2rem">
                        姓名:
                    </div>
                    <div v-show="dialogMsg.position.type === 2" style="display: table-cell">
                        <el-input placeholder="请输入领款人" v-model="dialogMsg.user.name" size="mini"></el-input>
                    </div>
                    <el-autocomplete
                            v-show="dialogMsg.position.type === 1"
                            popper-class="my-autocomplete"
                            size="mini"
                            v-model="dialogMsg.user.name"
                            :fetch-suggestions="querySearchTag"
                            placeholder="请输入关键字"
                            :trigger-on-focus="false"
                            @select="chooseTag"
                            clearable class="search">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        <template slot-scope="props">
                            <div class="name">
                                <p>{{ props.item.name }}</p>
                            </div>
                        </template>
                    </el-autocomplete>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog(false)">取 消</el-button>
                <el-button type="primary" @click="closeDialog(true)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Cookies from 'js-cookie'
    import API from '../../api'
    export default {
        name: "paper_detail_edit",

        props:{
            /**
             * 0: admin
             * 1: user编辑
             * 2: 查看
             * */
            showType: {
                type: Number,
            }
        },

        data(){
            return{
                /**
                 *  '0': 管理员
                 *  '1'：普通用户
                 * */
                type: Cookies.get('type'),
                token: Cookies.get('token'),
                info: JSON.parse(Cookies.get('info')),

                isFinish: 1,

                paperList: [],
                paperId: -1,
                dialogMsg: {
                    title: '',
                    position: {
                        name: '',
                        index: -1,
                        type: 0,
                    },
                    positionName: '',
                    user:{
                      name: '',
                    },
                    item: null,
                    type: -1,
                    visible: false,
                    dialogModal: false,

                    positionList:[],
                },

                positionList: [],
            }
        },


        created(){
            this.paperId = this.$route.params.paperId;
        },

        mounted:function(){
            this.getPapers();
            this.getPosition();
        },

        methods:{
            /**
             * @param type
             * 1：第一作者
             * 2：导师
             * 3：通讯作者
             */
            showDialog(type, item){
                this.dialogMsg.type = type;
                this.dialogMsg.item = item;
                if(this.dialogMsg.type === 1){
                    this.dialogMsg.title = '第一作者相关信息'
                    this.dialogMsg.user = item.diyizuozhe;
                    this.dialogMsg.position = item.diyizuozheShenfen;
                    this.dialogMsg.positionName = item.diyizuozheShenfen.name;
                    this.dialogMsg.positionList = this.positionList;
                } else if(this.dialogMsg.type === 2){
                    this.dialogMsg.title = '导师相关信息'
                    this.dialogMsg.user = item.daoshi;
                    this.dialogMsg.position = item.daoshiShenfen;
                    this.dialogMsg.positionName = item.daoshiShenfen.name;
                    this.dialogMsg.positionList = this.positionList.filter(res => res.type === 1);
                } else{
                    this.dialogMsg.title = '通讯作者相关信息'
                    this.dialogMsg.user = item.tongxunzuozhe;
                    this.dialogMsg.position = item.tongxunzuozheShenfen;
                    this.dialogMsg.positionName = item.tongxunzuozheShenfen.name;
                    this.dialogMsg.positionList = this.positionList;
                }
                this.dialogMsg.visible = true;
            },

            elselectChange(select){
                console.log(select)
                this.dialogMsg.position = this.dialogMsg.positionList[this.dialogMsg.positionList.map(d => d.name).indexOf(select)];
                this.dialogMsg.user = {
                    name: '',
                }
            },

            /**
             * 获取征集列表
             * */
            getPapers(){
                // 判断是否在首页
                let data ={
                    token: this.token,
                    renlingid: this.paperId,
                };
                API.getPaperDetail(data).then(res => {
                    if(res.code){
                        alert(res.message);
                        return;
                    }

                    this.isFinish = res.numbero.lunwen_info.is_finish;
                    console.log(this.info)
                    this.paperList = res.numbero.lunwen_list;
                    this.paperList.forEach(item => {
                        if(this.type === '0' && this.isFinish === 1) {
                            item.is_renling = 2;
                        } else if (item.is_renling === 1) {
                            if(parseInt(item.user_id) === parseInt(this.info.user_id)) {
                                item.is_renling = 2;
                            }
                        }
                    })

                }).catch(msg => {
                    alert('获取论文认领列表失败')
                })
            },

            /**
             * 获取职务列表
             * */
            getPosition(){
                let data = {
                    token: this.token,
                };
                API.getJobList(data).then(res => {
                    if(res.code){
                        console.log('获取职务信息失败');
                        return;
                    }
                    this.positionList = res.jobtitle_list;
                }).catch(msg => {
                    console.log('获取职务信息失败');
                })
            },
            /**
             * 1：第一作者
             * 2：导师
             * 3：通讯作者
             */
            closeDialog(isOk){
                this.dialogMsg.visible = false;
                if(isOk){
                    if(this.dialogMsg.type === 1){
                        this.dialogMsg.item.diyizuozhe = this.dialogMsg.user;
                        this.dialogMsg.item.diyizuozheShenfen = this.dialogMsg.position
                    } else if(this.dialogMsg.type === 2){
                        this.dialogMsg.item.daoshi = this.dialogMsg.user;
                        this.dialogMsg.item.daoshiShenfen = this.dialogMsg.position
                    } else{
                        this.dialogMsg.item.tongxunzuozhe = this.dialogMsg.user;
                        this.dialogMsg.item.tongxunzuozheShenfen = this.dialogMsg.position
                    }
                }
                this.dialogMsg.title = '';
                this.dialogMsg.position = {
                    type: -1,
                };
                this.dialogMsg.name = '';
            },

            submit(paper) {

                if (paper.daoshi.name === '' || paper.diyizuozhe.name === '') {
                    alert("请填写完整的信息")
                    return;
                }

                let data = {
                    token: this.token,
                    lunwenid: paper.id,
                    renling_id: this.paperId,
                    daoshi_shenfen_id: paper.daoshiShenfen.id,
                    daoshi_id: paper.daoshi.id + '',
                    diyitype: paper.diyizuozhe.type,
                    diyizuozhe_shenfen_id: paper.diyizuozheShenfen.id,
                    diyizuozhe_id: paper.diyizuozheShenfen.type === 2 ? paper.diyizuozhe.name:  paper.diyizuozhe.id + '',
                    tongxuntype: paper.tongxunzuozhe.type,
                    tongxunzuozhe_shenfen_id: paper.tongxunzuozheShenfen.id,
                    tongxunzuozhe_id: paper.tongxunzuozheShenfen.type === 2 ? paper.tongxunzuozhe.name:  paper.tongxunzuozhe.id + '',
                    lingkuanren: paper.lingkuanren,
                };

              API.userSubmitRenling(data).then(res=>{
                  if(res.code){
                      alert(res.message);
                      return;
                  }

                  alert('提交成功');
                  paper.is_renling = 1;

              }).catch(msg => {
                  alert('操作失败')
              })

            },

            update(paper){
                if (paper.daoshi.name === '' || paper.diyizuozhe.name === '') {
                    alert("请填写完整的信息")
                    return;
                }

                let data = {
                    token: this.token,
                    lunwenid: paper.id,
                    renling_id: this.paperId,
                    daoshi_shenfen_id: paper.daoshiShenfen.id,
                    daoshi_id: paper.daoshi.user_id + '',
                    diyitype: paper.diyizuozhe.type,
                    diyizuozhe_shenfen_id: paper.diyizuozheShenfen.id,
                    diyizuozhe_id: paper.diyizuozheShenfen.type === 2 ? paper.diyizuozhe.name:  paper.diyizuozhe.user_id + '',
                    tongxuntype: paper.tongxunzuozhe.type,
                    tongxunzuozhe_shenfen_id: paper.tongxunzuozheShenfen.id,
                    tongxunzuozhe_id: paper.tongxunzuozheShenfen.type === 2 ? paper.tongxunzuozhe.name:  paper.tongxunzuozhe.user_id + '',
                    lingkuanren: paper.lingkuanren,
                };

                if (this.type === 0) {
                    API.userUpdateRenling(data).then(res=>{
                        if(res.code){
                            alert(res.message);
                            return;
                        }

                        alert('提交成功');
                        this.getPapers();

                    }).catch(msg => {
                        alert('操作失败')
                    })
                } else {

                    API.userUpdateRenling(data).then(res=>{
                        if(res.code){
                            alert(res.message);
                            return;
                        }

                        alert('提交成功');
                        this.getPapers();

                    }).catch(msg => {
                        alert('操作失败')
                    })
                }
            },

            /**
             * 搜索标签
             * */
            querySearchTag (queryString, cb) {
                if (queryString){
                    let condition = {
                        name: queryString,
                        job_number: queryString,
                        job: this.dialogMsg.position.id,
                    };

                    if (isNaN(parseInt(queryString))) delete condition.job_number;
                    else delete condition.name;

                    let data = {
                        token: this.token,
                        condition: condition
                    };
                    API.Request_schema(data).then(res=>{
                        if (res.code) {
                            alert(res.message)
                        }
                        const resultList = res.list;
                        clearTimeout(this.timeout);
                        this.timeout = setTimeout(() => {
                            let result = queryString ? this.createStateFilter(resultList): resultList;
                            cb(result);
                        }, 2000*Math.random())
                    }).catch(msg => {
                        let result = queryString ? this.createStateFilter(resultList): resultList;
                        cb(result)
                    })
                }
            },

            /**
             * 选择标签
             * */
            chooseTag(item){
                console.log(item);
                this.dialogMsg.user = item;
            },

            createStateFilter (returnQuesList) {
                let results = [];
                returnQuesList.forEach(item=>{
                    results.push(item)
                });
                return results
            },



        }
    }
</script>

<style scoped>
    .tableTitle{
        display: table-cell;
        font-size: 15px;
        padding: 5px;
        color:gray;
        text-align: center;

    }
    .tableCell{
        display: table-cell;
        font-size: 15px;
        padding: 5px;
        text-align: center;
    }
    .grayLine{
        background-color: #e4efff;
    }
</style>